<template>
	<view class="content display  displayColumn displaycenter_aliem width-100 fontSize font_comm">
		<u-navbar @rightClick="rightClick" :autoBack="true" bgColor="#2373CA" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#fff;" size="23" ></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">加油站详情</text>
			</template>
		</u-navbar>
		
		<!-- 头 -->
		<view class="fn_tops display  displayColumn width-100 ">
			<!-- 系车站名称 -->
			<view class="gasName display  displaycenter_aliem width-100 M-T24">
				<image class="fn_iamge M-L30" src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/11/3fb802cfb416426e9c06b5fc9040abe0.png" mode=""></image>
				<span class="fn_name " style="margin-left: 12rpx;">{{infos.stationName}}</span>
			</view>
			<view class="yingyeTime display  displayColumn M-L30 M-T24">
				<view class="Time_one display  width-100 M-T30">
					<view class="Time_left display  displayColumn all_item">
						<span class="fn_ttx1">{{infos.startTime}}~{{infos.startTime}}</span>
						<span class="fn_ttx2" style="margin-top: 12rpx;">营业时间</span>
					</view>
					<view class="Time_center display  displayColumn all_item" @click="tochangeIndex">
						<span class="fn_ttx3">营业中</span>
						<span class="fn_ttx2" style="margin-top: 12rpx;">营业状态</span>
					</view>
					<view class="Time_right display  displayColumn all_item">
						<span class="fn_ttx1">{{infos.createTime}}</span>
						<span class="fn_ttx2" style="margin-top: 12rpx;">开业时间</span>
					</view>
				</view>
				<view class="lines M-L24 M-T30">
					
				</view>
				<view class="Time_three display  width-100 M-T24">
					<span class="fn_ttx4 M-L24">门站地址：</span>
					<span class="fn_ttx5">{{infos.address}}</span>
				</view>
			</view>
			<!-- 尾巴 -->
			<view class="lianxidianhua display  displayColumn M-L24 M-T30">
				<view class="phone_one display  width-100 M-T24">
					<span class="fn_phone M-L24">联系电话</span>
					<span class="fn_number M-R24">{{infos.phone}}</span>
				</view>
				<view class="phone_one display  width-100 M-T24">
					<span class="fn_phone M-L24">所在城市</span>
					<span class="fn_number M-R24">{{infos.area}}</span>
				</view>
				<view class="phone_one display  width-100 displaycenter_aliem M-T24" @click="premiview(infos.imgUrl)">
					<span class="fn_phone M-L24">门头照片</span>
					<span class="fn_number M-R24">查看 <uni-icons type="right" color="#72778A" size="15"></uni-icons></span>
				</view>
			</view>
			
		</view>
		
		<!-- 经营数据 -->
		<view class="jingyingsuju display  width-100  displayColumn M-T30">
			<view class="fn_one display  displaycenter_aliem">
				<image class="fn_image1 M-L30" src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/11/45700971ae1a466b85d9f12440400c77.png" mode=""></image>
				<span class="fn_tmns1" style="margin-left: 8rpx;">经营数据</span>
			</view>
			<view class="columnbox o-box M-L30" >
				
				<view class="rowbox wdh-100 spb" style="margin-top: 40rpx;">
					<view class="columnbox o-info" >
						<view class="o-num"><text style="font-size: 24rpx;margin-right: 4rpx;">¥</text>{{infos.totalOrders || 0}}</view>
						<view class="o-desc" style="margin-top: 18rpx;">总订单量</view>
					</view>
					<view class="columnbox o-info">
						<view class="o-num"><text style="font-size: 24rpx;margin-right: 4rpx;">¥</text>
							{{infos.totalAmount || 0}}
						</view>
						<view class="o-desc" style="margin-top: 18rpx;">总实收金额</view>
					</view>
					<view class="columnbox o-info" >
						<view class="o-num">{{infos.totalVolume || 0}}</view>
						<view class="o-desc" style="margin-top: 18rpx;">总加油量</view>
					</view>
				</view>
			</view>
			<view class="columnbox o-box M-L30" style="text-align: left;" v-for="(item,index) in infos.productVos" :key="index">
				<view class="display displaycenter_aliem width-100">
					<span class="fn_types M-L30">{{item.petrolName || 0}}</span>
				</view>
				<view class="rowbox wdh-100 spb" style="margin-top: 40rpx;">
					<view class="columnbox o-info" >
						<view class="o-num" style="color: #FF672D;"><text style="font-size: 24rpx;margin-right: 4rpx;color: #FF672D;">¥</text>{{item.totalOrders}}</view>
						<view class="o-desc" style="margin-top: 18rpx;">订单量</view>
					</view>
					<view class="columnbox o-info">
						<view class="o-num" style="color: #FF672D;"><text style="font-size: 24rpx;margin-right: 4rpx;color: #FF672D;">¥</text>
							{{item.totalAmount || 0}}
						</view>
						<view class="o-desc" style="margin-top: 18rpx;">实收金额</view>
					</view>
					<view class="columnbox o-info" >
						<view class="o-num" style="color: #FF672D;">{{item.totalVolume || 0}}</view>
						<view class="o-desc" style="margin-top: 18rpx;">加油量</view>
					</view>
				</view>
			</view>
			<view class="display width-100 " style="height: 80rpx;">
				
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				infos:{},
				
			}
		},
		onLoad(options) {
			this.id = options.id;
			
			this.getList();
		},
		methods: {
			// 预览照片
			premiview(imgs){
				let imgss = []
				imgss.push(imgs)
				uni.previewImage({
					
					urls:imgss,
					success:(res)=>{
						console.log(res)
					}
				})
			},
			
			getList(){
				this.$modal.loading('加载中');
				this.$req.get(`/xcx/petrolStation/${this.id}`).then(res=>{
					console.log(res)
					this.$modal.closeLoading();
					if(res.data.code==200){
						this.infos = res.data.data;
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.title{
	color: #fff;
}
.fn_tops{
	width: 750rpx;
	height: 550rpx;
	background: linear-gradient( 180deg, #2373CA 30%, #F4F5FA 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.fn_iamge{
	width: 32rpx;
	height: 32rpx;
}
.fn_name{
	font-weight: 600;
	font-size: 32rpx;
	color: #FFFFFF;
}
.yingyeTime{
	width: 690rpx;
	height: 228rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.lines{
	width: 642rpx;
	height: 0rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	border: 2rpx solid #F6F6F6;
}
.Time_three{
	
}
.fn_ttx1{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_ttx2{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_ttx3{
	font-weight: 600;
	font-size: 28rpx;
	color: #FF9901;
}
.Time_one{
	justify-content: space-around;
}
.fn_ttx4{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_ttx5{
	font-weight: 400;
	font-size: 24rpx;
	color: #212121;
}
.lianxidianhua{
	width: 690rpx;
	height: 228rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.fn_phone{
	font-weight: 400;
	font-size: 28rpx;
	color: #72778A;
}
.fn_number{
	font-weight: 600;
	font-size: 28rpx;
	color: #212121;
}
.phone_one{
	justify-content: space-between;
}
.fn_image1{
	width: 40rpx;
	height: 40rpx;
}
.fn_tmns1{
	font-weight: 600;
	font-size: 32rpx;
	color: #000000;
}
.o-box {
		width: 690rpx;
		background: #fff;
		padding: 24rpx;
		border-radius: 24rpx;
		margin-top: 36rpx;

		.o-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}
	}
.o-info {
		width: 33%;

		.o-num {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 44rpx;
			color: #126BC9;
		}

		.o-desc {
			font-family: PingFang SC, PingFang SC;
			font-size: 28rpx;
			color: #212121;
			margin-top: 8rpx;
		}

		.r-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 44rpx;
			color: #FF672D;
		}
	}
	.two_x{
		width: 690rpx;
		// height: 208rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_types{
		font-weight: 600;
		font-size: 24rpx;
		color: #212121;
		
	}
</style>
